<template>
    <view class="invitedStyle">
        <image
            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/invitedBG.png"
            mode="widthFix"
            class="invitedBG"
        ></image>
        <view class="search_top_nav" style="height: 150rpx; width: 100%">
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="search_nav_content">
                <view @click="back" style="width: 76rpx; height: 88rpx">
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"
                    ></image>
                </view>
                <label class="search_title">分享有礼</label>
            </view>
        </view>
        <!-- 老用户(普通渠道) -->
        <view
            class="shareArea"
            v-if="!configLoading && !userLoading && !!userInfo.phone && userInfo.registerSource === 0"
        >
            <view class="oldUser">
                <image
                    style="width: 310rpx; height: 310rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                >
                </image>
                <label style="margin-top: 40rpx; color: #272a37; font-size: 28rpx; line-height: 40rpx; font-weight: 600"
                    >本活动仅新用户可参与</label
                >
            </view>
            <view class="submitBtn" @click="back"> 回到首页 </view>
        </view>
        <!-- 新用户或者老用户(分享渠道) -->
        <view
            class="shareArea"
            v-else-if="!configLoading && !userLoading && (!userInfo.phone || userInfo.registerSource === 1)"
        >
            <view class="share">
                <view class="shareNickName">
                    {{ optionsParams.invitName }}
                </view>
                <view class="shareText"> 邀请您加入 倾小瘦瘦身俱乐部 ，注册成功后可获得如下奖励 </view>
            </view>
            <view class="" v-if="awardCoupon.id">
                <CouponItem :showBtn="false" :coupon="awardCoupon" />
            </view>
            <view class="overdue" v-else>
                <image
                    style="width: 240rpx; height: 240rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                >
                </image>
                <label style="margin-top: 10rpx; color: #272a37; font-size: 28rpx; line-height: 36rpx"
                    >奖品已过期</label
                >
            </view>
            <!-- 老用户(分享渠道)  -->
            <view v-if="!!userInfo.phone && userInfo.registerSource === 1" class="submitBtn disabledBtn">
                已领取奖励
            </view>
            <!-- 新用户 -->
            <view v-else class="submitBtn" @click="toLogin"> 注册并领取奖励 </view>
        </view>
    </view>
</template>

<script>
import CouponItem from "../components/couponItem/index.vue";
import { mapState, mapMutations } from "vuex";

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";

export default {
    name: "invited",
    components: {
        CouponItem,
    },
    data() {
        return {
            optionsParams: {
                invitName: "",
                invitId: "",
            },
            statusBarHeight,
            shareAward: {},
            awardCoupon: {},
            code: "",
            userDetail: {},
            configLoading: true,
            userLoading: true,
        };
    },
    onLoad(options) {
        if (options.invitName) {
            options.invitName = decodeURIComponent(options.invitName);
        }
        this.optionsParams = options;
        uni.login({
            provider: "weixin",
            success: (res) => {
                this.code = res.code;
                this.authCode();
                this.getDetail();
            },
        });
    },
    computed: {
        userInfo() {
            return this.userDetail;
        },
    },
    methods: {
        ...mapMutations(["loginSaveUserInfo"]),
        /** 分享奖励设置 */
        async getDetail() {
            this.configLoading = true;
            try {
                const { data } = await this.request.httpJsonRequest(
                    "/mp-api/wx/mall/config/queryByKey",
                    {
                        key: "shareAward",
                    },
                    "GET",
                );
                this.shareAward = data || {};
                this.getCouponDetail();
            } catch (e) {
                this.configLoading = false;
            }
        },
        /** 优惠券详情 */
        async getCouponDetail() {
            try {
                const { data } = await this.request.httpJsonRequest(
                    `/mp-api/wx/coupon/template/detail/${this.shareAward.registerAward}`,
                    null,
                    "GET",
                );
                this.awardCoupon = data || {};
            } catch (e) {}
            this.configLoading = false;
        },
        toLogin() {
            uni.redirectTo({
                url: `/pages/login/login?invitId=${this.optionsParams.invitId}&templateNo=${
                    this.awardCoupon.templateNo || ""
                }`,
            });
        },
        toHome() {
            uni.switchTab({
                url: "/pages/home/home",
            });
        },
        back() {
            uni.switchTab({
                url: "/pages/home/home",
            });
        },
        /** 登录 */
        authCode() {
            let data = {
                registerSource: 1, // 注册渠道 0.普通渠道 1.分享渠道
                code: this.code,
            };
            if (this.optionsParams.invitId) {
                data.inviteUserId = this.optionsParams.invitId;
            }
            console.log("authCode", data);
            this.userLoading = true;
            this.request
                .httpJsonRequest("/mp-api/wx/auth/code", data, "POST", false)
                .then((res) => {
                    if (res.code == 0) {
                        if (res.data != null) {
                            if (res.data.uid != 0) {
                                this.request.setToken(res.data.accessToken);
                                this.loginSaveUserInfo(res.data);
                                this.requestUser(res.data);
                            } else {
                                this.userLoading = false;
                            }
                        } else {
                            this.userLoading = false;
                        }
                    } else {
                        this.userLoading = false;
                    }
                })
                .catch(() => {
                    this.userLoading = false;
                });
        },
        /** 用户详情 */
        requestUser(data) {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${data.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                        this.userDetail = res.data;
                    }
                    this.userLoading = false;
                })
                .catch(() => {
                    this.userLoading = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.invitedStyle {
    position: relative;
    height: 100%;
    background: #e0ede9;

    .invitedBG {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .search_title {
        font-size: 32rpx;
    }

    .shareArea {
        position: relative;
        z-index: 2;
        margin: 140rpx 30rpx 0;
        padding: 40rpx;
        box-shadow: 0px 16rpx 48rpx 0px rgba(30, 64, 54, 0.08);
        border-radius: 24rpx;
        background: #fff;
        color: #333333;
    }

    .share {
        margin-bottom: 100rpx;
    }

    .shareNickName {
        width: 100%;
        height: 40rpx;
        margin-bottom: 4rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 40rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }

    .shareText {
        height: 68rpx;
        font-size: 24rpx;
        line-height: 34rpx;
    }

    .submitBtn {
        margin-top: 120rpx;
        height: 96rpx;
        background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
        box-shadow: 0px 24rpx 48rpx 0px rgba(55, 168, 148, 0.2);
        border-radius: 24rpx;
        line-height: 96rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;

        &.disabledBtn {
            background: #cccccc;
        }
    }

    .oldUser,
    .overdue {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .oldUser {
        margin-top: 60rpx;
    }

    .oldUser + .submitBtn {
        margin-top: 80rpx;
    }
}
</style>
